<template>
  <div class="chat-section">
    <div class="section-header">
      <div class="title">聊天</div>
    </div>
    <div class="messages" ref="messageContainer">
      <div
        v-for="msg in messages"
        :key="msg.id"
        class="message-item"
        :class="{ 'message-self': msg.sender === '我' }"
      >
        <div class="message-content">
          <span class="sender-name">{{ msg.sender }}</span>
          <div class="message-text">{{ msg.content }}</div>
        </div>
      </div>
    </div>
    <div class="input-area">
      <input
        v-model="newMessage"
        @keyup.enter="sendMessage"
        placeholder="发送消息..."
      />
      <button @click="sendMessage">
        <el-icon><Position /></el-icon>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Position } from "@element-plus/icons-vue";

const props = defineProps({
  messages: Array,
});

const emit = defineEmits(["send"]);
const inputMessage = ref("");

const sendMessage = () => {
  if (inputMessage.value.trim()) {
    emit("send", inputMessage.value);
    inputMessage.value = "";
  }
};
</script>

<style lang="scss" scoped>
.participants-section,
.chat-section {
  .section-header {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    .title {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
  }
}

.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  .messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    // 使用与学生列表相同的滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }

    &:hover::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
    }

    &:not(:hover)::-webkit-scrollbar-thumb {
      background: transparent;
    }

    .message-item {
      margin-bottom: 12px;

      .message-content {
        .sender-name {
          display: block;
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
          margin-bottom: 4px;
        }

        .message-text {
          color: #fff;
          font-size: 14px;
          line-height: 1.4;
          padding: 8px 12px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
          word-break: break-word;
          display: inline-block;
          max-width: 80%;
        }
      }

      // 自己发送的消息样式
      &.message-self {
        .message-content {
          text-align: right;

          .sender-name {
            color: #4080ff;
          }

          .message-text {
            background: #4080ff;
            color: #fff;
            border-radius: 4px;
            text-align: left;
          }
        }
      }
    }
  }

  .input-area {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 8px;

    input {
      flex: 1;
      background: #2b2b2b;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      padding: 8px 12px;
      color: #fff;
      outline: none;

      &::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }

      &:focus {
        border-color: #4080ff;
      }
    }

    button {
      width: 36px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #4080ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      .el-icon {
        font-size: 18px;
      }

      &:hover {
        background: #5090ff;
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }
}
</style>
